<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"  
                xmlns:h="http://java.sun.com/jsf/html"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../templates/FoodSageTemplate.xhtml">

    <ui:define name="logout">
        <p:commandLink id="logoutLink" actionListener="#{touristLogoutManagedBean.doLogout}" value="#{bundle['login.logout.label']}" ajax="false" immediate="true" />
    </ui:define>

    <ui:define name="main_menu">
        <f:view beforePhase="#{itineraryChooseItineraryTypeManagedBean.initView}"/>
        <p:menubar model="#{itineraryChooseItineraryTypeManagedBean.touristMainMenuModel}"/>
    </ui:define>

    <ui:define name="nav_menu">
        <p:menu model="#{itineraryChooseItineraryTypeManagedBean.touristNavMenuModel}"/>
    </ui:define>

    <ui:define name="content">
        <f:view beforePhase="#{reservationManagerBean.initProductList}"></f:view>
        <h:form id="formMain">
            <h1>Visitor Selects Meals and Set Meals</h1>         
            <p:growl id="growl" showDetail="true"/>  
            <p:panel style="position:relative; width:300px;float:left; height:780px;" >

                <p:tabView event="click" >
                    <c:forEach items="#{reservationManagerBean.listOfFoodType}" var="food" varStatus="current">
                        <p:tab title="#{food.name}">
                            <p:dataTable var="meal" value="#{reservationManagerBean.listOfCategory.get(current.index)}"
                                         emptyMessage="No #{food.name}" selection="#{reservationManagerBean.selectedProduct[current.index]}"
                                         rowSelectListener="#{reservationManagerBean.onRowSelect}"
                                         selectionMode="single" onRowSelectUpdate="test" paginator="true" rows="3">
                                <p:column sortBy="#{meal.name}" filterBy="#{meal.name}" style="width:150px">
                                    <f:facet name="header">
                                        <h:outputText value="Name" />
                                    </f:facet>
                                    <h:outputText value="#{meal.name}" />
                                </p:column>
                            </p:dataTable>

                        </p:tab>
                    </c:forEach>  
                    <p:tab title="Set Meal">
                        <p:dataTable var="meal" value="#{reservationManagerBean.listOfCategory.get(reservationManagerBean.listOfCategory.size()-1)}" 
                                     emptyMessage="No Set Meal" selection="#{reservationManagerBean.selectedProduct[reservationManagerBean.listOfCategory.size()-1]}"
                                     rowSelectListener="#{reservationManagerBean.onRowSelect}"
                                     selectionMode="single" onRowSelectUpdate="test" paginator="true" rows="3">
                            <p:column sortBy="#{meal.name}" filterBy="#{meal.name}">
                                <f:facet name="header">
                                    <h:outputText value="ID" />
                                </f:facet>
                                <h:outputText value="#{meal.name}" />
                            </p:column>
                        </p:dataTable>

                    </p:tab>
                </p:tabView>

                <p:panel id="menu" header="Your menu">  
                    <div style="height: 350px">
                        <c:forEach items="#{reservationManagerBean.listOfFoodType}" var="food" varStatus="current">
                            <p>
                                <h:outputText value="#{food.name}" styleClass="menu"/> 
                                <c:if test="#{reservationManagerBean.choiceList.size() != 0}">
                                    <h:panelGrid columns="2" style="width: 250px; color: blue; font-weight: bold;">
                                        <c:forEach items="#{reservationManagerBean.choiceList.get(current.index)}" var="selectedProduct">

                                            <h:outputText value="#{selectedProduct.name}" /> 
                                            <h:outputText value="#{reservationManagerBean.quantityList.get(selectedProduct.id)}" />

                                        </c:forEach>
                                    </h:panelGrid>
                                </c:if>
                            </p>
                        </c:forEach>

                        <h:outputText value="Set Meal" styleClass="menu"/>
                        <c:if test="#{reservationManagerBean.choiceList.size() != 0}">
                            <h:panelGrid columns="2" style="width: 250px; color: blue; font-weight: bold;">
                                <c:forEach items="#{reservationManagerBean.choiceList.get(reservationManagerBean.listOfCategory.size()-1)}" var="selectedProduct">

                                    <h:outputText value="#{selectedProduct.name}" /> 
                                    <h:outputText value="#{reservationManagerBean.quantityList.get(selectedProduct.id)}" />

                                </c:forEach>
                            </h:panelGrid>
                        </c:if>
                    </div>
                </p:panel>

                <h:panelGrid columns="2" >
                    <h:outputText value="Total offline bill: " />
                    <h:outputText value="#{reservationManagerBean.totalBill}" style="font-weight: bold; color:blue;"/>

                    <h:outputText value="Total online bill: " />
                    <h:outputText value="#{reservationManagerBean.discountBill}" style="font-weight: bold; color:red;"/>
                    <h:outputText value="You Save:" />
                    <h:outputText value="#{reservationManagerBean.totalBill - reservationManagerBean.discountBill}" style="font-weight: bold; color:purple;"/>
                    <h:outputText value="Deposit:" />
                    <h:outputText value="#{reservationManagerBean.reservation.deposit}" style="font-weight: bold; color:purple;"/>
                    <p:commandButton id="btn" value="Confirm Reservation" update="panel" action="tourist/VisitorConfirmReservation?faces-redirect=true"/>
                </h:panelGrid>
            </p:panel>
            <p:panel id="test" style="position:relative; width: 600px;float:left; height: 780px">
                <p><h:outputText value="" />
                    <h:graphicImage id="gi" alt="The image could not be found."   value="/images/#{reservationManagerBean.meal.imageLink}" width="550" height="450" rendered="#{reservationManagerBean.meal.imageLink !=null}"></h:graphicImage>
                </p>  
                <p><h:outputText value="Name:" />
                    <h:outputText value="#{reservationManagerBean.meal.name}" style="font-weight: bold"/>
                </p>  
                <p><h:outputText value="Description:" />
                    <h:outputText value="#{reservationManagerBean.meal.description}" style="font-weight: bold"/>
                </p>  
                <p><h:outputText value="Offline Price:" />
                    <h:outputText value="#{reservationManagerBean.meal.originalPrice}" style="font-weight: bold"/>
                </p>       

                <p><h:outputText value="Online Price:" />
                    <h:outputText value="#{reservationManagerBean.price}" style="font-weight: bold"/>
                </p>  

                <p><h:outputText value="Quantity:" />
                    <h:selectOneMenu value="#{reservationManagerBean.quantity}" id="mealQuantity">
                        <f:selectItem itemLabel="0" itemValue="0"></f:selectItem>
                        <f:selectItem itemLabel="1" itemValue="1"></f:selectItem>
                        <f:selectItem itemLabel="2" itemValue="2"></f:selectItem>
                        <f:selectItem itemLabel="3" itemValue="3"></f:selectItem>
                        <f:selectItem itemLabel="4" itemValue="4"></f:selectItem>
                        <f:selectItem itemLabel="5" itemValue="5"></f:selectItem>
                        <f:selectItem itemLabel="6" itemValue="6"></f:selectItem>
                        <f:selectItem itemLabel="7" itemValue="7"></f:selectItem>
                        <f:selectItem itemLabel="8" itemValue="8"></f:selectItem>
                        <f:selectItem itemLabel="9" itemValue="9"></f:selectItem>
                        <f:selectItem itemLabel="10" itemValue="10"></f:selectItem>
                        <f:selectItem itemLabel="11" itemValue="11"></f:selectItem>
                        <f:selectItem itemLabel="12" itemValue="12"></f:selectItem>
                        <f:selectItem itemLabel="13" itemValue="13"></f:selectItem>
                        <f:selectItem itemLabel="14" itemValue="14"></f:selectItem>
                        <f:selectItem itemLabel="15" itemValue="15"></f:selectItem>
                        <f:selectItem itemLabel="16" itemValue="16"></f:selectItem>
                        <f:selectItem itemLabel="17" itemValue="17"></f:selectItem>
                        <f:selectItem itemLabel="18" itemValue="18"></f:selectItem> 
                        <f:selectItem itemLabel="19" itemValue="19"></f:selectItem>
                        <f:selectItem itemLabel="20" itemValue="20"></f:selectItem>
                    </h:selectOneMenu>
                </p>
                <div style="position:absolute; bottom:0px; left: 300px;">
                    <p:commandButton value="Add" disabled="#{reservationManagerBean.checkContain()}" actionListener="#{reservationManagerBean.addToList}" update="test menu growl formMain" ajax="true"/>  
                    <p:commandButton value="Remove" disabled="#{!reservationManagerBean.checkContain()}" actionListener="#{reservationManagerBean.removeFromList}" update="test menu growl formMain" ajax="true" />
                    <p:commandButton value="Edit" disabled="#{!reservationManagerBean.checkContain()}" actionListener="#{reservationManagerBean.changeValueInList}" update="test menu growl formMain" ajax="true" />
                </div>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>